<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Login and Registration</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="icon"  href="http://47.100.102.177:8080/app/images/common/云上书屋.png" type="image/x-icon" />
        <link rel="stylesheet" type="text/css" href="http://47.100.102.177:8080/app/css/login/demo.css" />
        <link rel="stylesheet" type="text/css" href="http://47.100.102.177:8080/app/css/login/style.css" />
		<link rel="stylesheet" type="text/css" href="http://47.100.102.177:8080/app/css/login/animate-custom.css" />
        <link rel="stylesheet" href="../../boot/plugin/layui/css/layui.css">
        <script src="../../boot/plugin/layui/layui.js"></script>
        <script type="text/javascript" src="http://47.100.102.177:8080/app/plugin/jquery.min.js"></script>
    </head>
    <body>
        <div class="container">
            <header>
                <h1>Login and Registration Form <span>with Cloud Bookstore</span></h1>
				<nav class="codrops-demos">
					<span>Click <strong>"Join us"</strong> to see the form switch</span>
				</nav>
            </header>
<div style="text-align:center;clear:both;">
</div>
            <section>				
                <div id="container_demo" >
                    <a class="hiddenanchor" id="toregister"></a>
                    <a class="hiddenanchor" id="tologin"></a>
                    <div id="wrapper">
                        <div id="login" class="animate form">
                            <form  action="/boot/user/loginuser" autocomplete="on" method="post" id="Login_User">
                                <h1>Login</h1> 
                                <p> 
                                 <label for="username" class="uname" data-icon="u" > Your email or username or phone</label>
                                    <input id="username" name="account"  type="text" placeholder="请输入用户名/手机号/邮箱"/>
								</p>
                                <p> 
                                    <label for="password" class="youpasswd" data-icon="p"> Your password </label>
                                    <input id="password" name="passwd" required="required" type="password" placeholder="请输入密码" />
								</p>
                                <p class="keeplogin"> 
									<input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" /> 
									<label for="loginkeeping">Keep me logged in</label>
								</p>
								<p class="background button" style="top: 295px;position: absolute;width: 400px;">
								    <input  id="babn"  type="button" value="ToBackgroud" /> 
								</p>
                                <p class="login button"> 
                                    <input id="btn"  onclick="login()" type="button"  value="Login" />
								</p>
                                <p class="change_link">
                                    <a href="/boot/facelogin" style="width: 30px;position: absolute;left: 60px;top: 6px;background-image: url('/boot/plugin/人脸.svg');height: 40px;background-size: contain"></a>
                                    <a href="/boot/emaillogin" style="width: 30px;position: absolute;left: 10px;top: 6px;background-image: url('/boot/plugin/邮箱.svg');height: 40px;background-size: contain">
                                    </a>
									Not a member yet ?
									<a href="#toregister" class="to_register">Join us</a>
								</p>
                            </form>
                        </div>

                        <div id="register" class="animate form">
                            <form  action="/boot/user/Registration" autocomplete="on" id="Regis_User" method="post">
                                <h1> Sign up </h1> 
                                <p> 
                                    <label for="usernamesignup" class="uname" data-icon="u">Your username</label>
                                    <input id="usernamesignup" name="usernamesignup" required="required" type="text" />
								</p>
                                <p> 
                                    <label for="emailsignup" class="youmail" data-icon="e" > Your email</label>
                                    <input id="emailsignup" name="emailsignup" required="required" type="email" />
                                    <label id="tip-2" class="t" style="color: red;">格式错误！</label>
								</p>
                                <p> 
                                    <label for="passwordsignup" class="youpasswd" data-icon="p">Your password </label>
                                    <input id="passwordsignup" name="passwordsignup" required="required" type="password" />
									<label id="tip-3" class="t" style="color: red;">格式错误！</label>
								</p>
                                <p> 
                                    <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Please confirm your password </label>
                                    <input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" />
									<label id="tip-4" class="t" style="color: red;">两次密码不一致！</label>
								</p>
								<p>
								    <label for="phonesignup" class="youmail" data-icon="p" > Your phone</label>
								    <input id="phonesignup" name="phonesignup" required="required" type="phone" /> 
									<label id="tip-5"class="t" style="color: red;">格式错误！</label>
								</p>
                                <p class="signin button">
                                    <a href="/boot/faceregis" style="width: 100px;position: absolute;left: 10px;top: 465px;background-image: url('/boot/plugin/人脸识别.svg');height: 100px;background-size: contain"></a>
									<input id="regis" class="btn" type="button" value="Sign up"/>
								</p>
                                <p class="change_link">
									Already a member ?
									<a href="#tologin" class="to_register"> Go and log in </a>
								</p>
                            </form>
                        </div>
                    </div>
                </div>  
            </section>
        </div>
	</body>	
	<script>
        let username;
        let pwd;
        let uname;
        let uphone;
        let upasswd;
        let uemail;
        let ck = document.getElementById("loginkeeping")
        let p2=document.getElementById("emailsignup");
        let p3=document.getElementById("passwordsignup");
        let p4=document.getElementById("passwordsignup_confirm");
        let p5=document.getElementById("phonesignup");
        let t2=document.getElementById("tip-2");
		let t3=document.getElementById("tip-3");
		let t4=document.getElementById("tip-4");
		let t5=document.getElementById("tip-5");
		let b=document.getElementById("btn");
		let ba=document.getElementById("babn");
		let su=document.getElementById("regis");
		let date=new Date();
        let datestr=date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds()
        var account_reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
        var password_reg = /^[a-zA-Z]\w{5,17}$/;
        var email_reg=/^[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?$/;
        document.getElementById("username").value=localStorage.getItem("username");
        document.getElementById("password").value=localStorage.getItem("password");
        p5.onblur=()=>{
            if(account_reg.test(p5.value)){
                t5.className="t";
            }
            else{
                t5.className="tip";
            }
        }
        p4.onblur=()=>{
            if(p4.value==p3.value){
                t4.className="t";
            }
            else{
                t4.className="tip";

            }
        }
        p3.onblur=()=>{
            if(password_reg.test(p3.value)){
                t3.className="t";
            }
            else{
                t3.className="tip";
            }
        }
        p2.onblur=()=>{
            if(email_reg.test(p2.value)){
                t2.className="t";
            }
            else{
                t2.className="tip";
            }
        }
		b.onclick=()=>{
		    username=$("#username").val();
		    pwd=$("#password").val();
            let param={account:username,passwd:pwd};
            $.post('/boot/user/loginuser',param,function(res){
                if(res.code=='404'){
                    alert(res.msg);
                }else if(res.code=='500') {
                    alert(res.msg);
                }
                else {
                    window.location.href = './index01';
                }
            })
            if(ck.checked){
                let username = $("#username").val();
                let passwd=$("#password").val();
                //2. h5中提供了本地存储 - localStorage
                //保存在客户端 - key-value形式
                localStorage.setItem("username",username);
                localStorage.setItem("password",passwd);
            }else{
                //忘记密码
                //清空本地存储
                // localStorage.clear();
                localStorage.removeItem("username");
                localStorage.removeItem("password")
            }
			}
		ba.onclick=()=>{
			window.location.href='./admin/login'
		}

		su.onclick=()=>{
            console.log(datestr)
		    if(password_reg.test(p3.value)&&p4.value==p3.value&&account_reg.test(p5.value)&&email_reg.test(p2.value)){
                username=$("#usernamesignup").val();
                uemail=$("#emailsignup").val();
                upasswd=$("#passwordsignup").val();
                uphone=$("#phonesignup").val();
                urepasswd=$("#passwordsignup_confirm").val();
                let param={uname:username,account:uphone,password:upasswd,email:uemail,regisdate:datestr};
                let param_confirm={account:username};
                $.post('/boot/user/loginuser',param_confirm,function(res){
                    console.log(param_confirm);
                    console.log(res.code);
                    if(!(res.code=='404')){
                        alert("账户名已被注册");
                    }
                    else {
                        let param_confirm={account:uphone};
                        $.post('/boot/user/loginuser',param_confirm,function(res){
                            console.log(param_confirm);
                            console.log(res.code);
                            if(!(res.code=='404')){
                                alert("手机号已被注册");
                            }
                            else {
                                let param_confirm={account:uemail}; console.log(param_confirm);
                                $.post('/boot/user/loginuser',param_confirm,function(res){
                                    console.log(param_confirm);
                                    console.log(res.code);
                                    if(!(res.code=='404')){
                                        alert("邮箱已被注册");
                                    }
                                    else {
                                        $.post('/boot/user/Registration',param,function (res) {
                                            console.log(param);
                                            alert("恭喜你，注册成功！");
                                            window.location.href = 'login';
                                    })
                            }
                        })
                    }
                    })
            }
		    })
        }
		    else {
		        alert("请完善注册信息");
            }
        }
	</script>
</html>